<template>
  <view class="mainPage" style="padding-top: 0">
    <view class="list padding-xs padding-top radius-lg">
      <view class="radius-xl item padding-sm" style="background: #ffffff"
            v-for="(item,index) in projectList"
            :key="index"
            :class="projectList.length - 1 != index ? 'solid-bottom':''">
        <image :src="item.image" mode="" class="img"></image>
        <view class="probox">
          <view class="title text-bold text-black">
            <text>{{item.name}}</text>
            <view class="text-sm text-right cost text-red">
              <text class="text-bold">¥</text>
              <text class="text-lg text-bold">{{item.price}}</text>
            </view>
          </view>
          <view class="text-gray text-sm">{{item.description}}</view>
          <!-- <view class="cu-tag sm margin-bottom-sm">
            {{item.tag}}
          </view> -->
          <view class="price flex flex-wrap">
            <view class="time basis-lg text-sm">
              <text class="cuIcon-timefill text-lg themeColor"></text>
              <text class="padding-left-mn">{{item.duration}}分钟</text>
              <text class="cuIcon-tagfill text-lg padding-left-xs themeColor"></text>
              <text class="padding-left-mn">{{item.orderDetails.length}}人选择</text>
            </view>
            <view class="basis-sm text-right liji" @click="toUrl('/pages/project/project?projectId='+item.id)">
              <div class="cu-btn bg-primary sm round" style="line-height: 40rpx">立即选择</div>
            </view>
          </view>
        </view>
      </view>
    </view>
    <u-empty v-if="!projectList.length"/>
  </view>
</template>

<script>
	export default {
		data() {
			return {
        projectList: [],
        userInfo: {}
			}
		},
    onShow() {
      this.userInfo = uni.getStorageSync('userInfo') || {}
      this.getList()
    },
		methods: {
      getList() {
        if (!this.userInfo.id) return this.$u.toast('请先登录')
        this.$http.getProjectCollectList({
          member_id: this.userInfo.id
        }).then(res => {
          this.projectList = res.map(item => {
            return {
              ...item.good,
            }
          })
        })
      }
		}
	}
</script>
<style lang="less" scoped>
.box{
  position: fixed;
  width: 100%;
  z-index: 99;
  .header-message{
    font-size: 40rpx;
  }
}
.banner{
  padding-top: 100rpx;
}
.navTab{
  border-radius: 50px;
}
.therapist{
  .item{
    image{
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
    }
  }
}
.list{
  .item{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    height: 180rpx;
    // background-color: #fea1a5;
    .img{
      width: 170rpx;
      height: 130rpx;
      border-radius: 10upx;
    }
    .probox{
      width: 70%;
      height: 130rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .title{
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        .cost{
          width: 125upx;
        }
      }
      .price{
        align-items: center;
      }
    }
  }
}
.liji{
  button{
    background: var(--theme-bg-color);
    color: white;
  }
}
</style>
